<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商家注册</title>
    <link rel="stylesheet" href="Jeff/css/common.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        * {
            margin: 1px;
            padding: 0px;
            box-sizing: border-box;
        }
        body {
            background:  no-repeat center;
            padding-top: 25px;
        }
        .rg_layout {
            width: 670px;
            height: 500px;
            border-radius: 4px;

            margin: auto;
        }
        .rg_left {
            float: left;
            margin-left: 25px;
            margin-top: 25px;
        }
        .rg_left>p:first-child {
            color: #ff9a26;
            font-size: 25px;
        }
        .rg_left>p:last-child {
            color: #A6A6A6;
            font-size: 25px;
        }
        .rg_center {
            float: left;
            margin-top: 30px;
        }
        .rg_right {

            float: right;
            margin: 15px;
        }

        .rg_right>p:first-child {
            font-size: 15px;

        }

        .rg_right p a {
            color: rgb(97, 57, 221);
        }

        .td_left {
            width: 100px;
            text-align: right;
            height: 45px;
        }

        .td_right {
            padding-left: 50px;
        }
        #btn_sub {
            width: 150px;
            height: 40px;
            border-radius: 4px;
            margin-top: 10px;
            background-color: #FFD026;
            border: 1px solid #FFD026;
        }
        #td_sub {
            padding-left: 150px;
        }
        .error {
            color: red;
            vertical-align: middle;
            font-size: 1px;
        }
        body {
            position: fixed;
            top: 206px;
            left: 86px;
            width: 80%;
            height: 80%;
            min-width: 1438px;

            background-color: #fff;
            background: url(https://img.dowebok.com/8457.png);
            -o-background-size: cover;
        }

        button{

            background:#F0F0F0 repeat-x;
            padding-top:3px;
            border-top:1px solid #708090;
            border-right:1px solid #708090;
            border-bottom:1px solid #708090;
            border-left:1px solid #708090;
            width:80px;
            height:auto;
            font-size:10pt;
            cursor:hand;
            background: rgb(66, 184, 221); /* this is a light blue */
        }
    </style>

    <script>

        $(function () {
            var errMsg;
            $.each($("input"), function (i, val) {
                $(val).blur(function () {
                    if ($(val).attr("name") == "shop_name") {
                        $(".userMsg").remove();
                        var shop_name = val.value;
                        var regName = /[\u4e00-\u9fa5]{2,6}/
                        if (shop_name == "" || shop_name.trim() == "") {
                            errMsg = "<span  class='userMsg' style='color:red;'>昵称不能为空</span>";
                        } else if (!regName.test(shop_name)) {
                            errMsg = "<span class='userMsg' style='color:red;'>由1-6个汉字组成</span>";
                        } else {
                            errMsg = "<span  class='userMsg' style='color:red;'>√</span>";
                        }
                        $(this).parent().append(errMsg);
                    } else  if ($(val).attr("name") == "legal_p") {
                        $(".userMsg").remove();
                        var legal_p = val.value;
                        var regName = /[\u4e00-\u9fa5]{2,6}/
                        if (legal_p == "" || legal_p.trim() == "") {
                            errMsg = "<span  class='userMsg' style='color:red;'>法人姓名不能为空</span>";
                        } else if (!regName.test(legal_pn)) {
                            errMsg = "<span class='userMsg' style='color:red;'>由1-6个汉字组成</span>";
                        } else {
                            errMsg = "<span  class='userMsg' style='color:red;'>√</span>";
                        }
                        $(this).parent().append(errMsg);
                    } else
                    if ($(val).attr("name") == "user_name") {
                        $(".userMsg").remove();
                        var user_name = val.value;
                        var regName = /[\u4e00-\u9fa5]{2,6}/
                        if (user_name == "" || user_name.trim() == "") {
                            errMsg = "<span  class='userMsg' style='color:red;'>用户名不能为空</span>";
                        } else if (!regName.test(user_name)) {
                            errMsg = "<span class='userMsg' style='color:red;'>由2-6个汉字组成</span>";
                        } else {
                            errMsg = "<span  class='userMsg' style='color:red;'>√</span>";
                        }
                        $(this).parent().append(errMsg);
                    } else if ($(val).attr("name") == "pwd") {
                        $(".pwdMsg").remove();
                        var pwd = val.value;
                        var regPwd = /^\w{4,10}$/;
                        if (pwd == "" || pwd.trim() == "") {
                            errMsg = "<span id='pwdMsg' class='pwdMsg' style='color:red;'>密码不能为空</span>";
                        } else if (!regPwd.test(pwd)) {
                            errMsg = "<span class='pwdMsg' style='color:red;'>格式错误</span>";
                        } else {
                            errMsg = "<span class='pwdMsg' style='color:red;'>√</span>";
                        }
                        $(this).parent().append(errMsg);
                    }  else if ($(val).attr("name") == "tel") {
                        $(".telMsg").remove();
                        var tel = val.value;
                        var regtel = /[13,15,18]\d{9}/;
                        if (tel == "" || tel.trim() == "") {
                            errMsg = "<span class = 'telMsg' style = 'color:red;' > 手机号不能为空 "
                        } else if (!regtel.test(tel)) {
                            errMsg = "<span class = 'telMsg' style = 'color:red;' > 格式错误 < /span>"
                        } else {
                            errMsg = "<span class = 'telMsg' style = 'color:red;' > √"
                        }
                        $(this).parent().append(errMsg);
                    }
                });
            });
        });

    </script>
</head>
<body>

<div class="rg_layout">
    <!--    页面左部分-->
    <div class="rg_left">
        <p>商家注册</p>
        <p>SHOP LOGIN</p>

    </div>
    <!--页面中间部分-->
    <div class="rg_center">
        <div class="rg_form ">
            <!--定义表单 form-->
            <form action="/shop/ApplyShop" id="form" method="post">
                <table>
                    <!--  店铺名-->
                    <tr>
                        <td class="td_left"><label >店铺名</label></td>
                        <td class="td_right">
                            <input type="text" id="shop_name" name="shop_name" placeholder="设置店铺名" required>
                            <span  class="error"></span>
                        </td>

                    </tr>
                    <!--  法人姓名-->
                    <tr>
                        <td class="td_left"><label >法人姓名</label></td>
                        <td class="td_right">
                            <input type="text" id="legal_p" name="legal_p" placeholder="法人姓名" required>
                            <span  class="error"></span>
                        </td>

                    </tr>
                    <!-- 用户名-->

                    <tr>
                        <td class="td_left"><label >用户名</label></td>
                        <td class="td_right">
                            <input type="text" id="user_name" name="user_name" placeholder="用户名" required>
                            <span class="error"></span>
                        </td>
                    </tr>

                    <!--确认 密码-->
                    <tr>
                        <td class="td_left"><label >密码</label></td>
                        <td class="td_right">
                            <input type="password" id="pwd" name="pwd" placeholder="请输入密码" required>
                            <span  class="error"></span>
                        </td>
                    </tr>

                    <!--手机号-->
                    <tr>
                        <td class="td_left"><label >手机号</label></td>
                        <td class="td_right">
                            <input type="text" id="tel" name="tel" placeholder="手机号" required>
                            <span  class="error"></span>
                        </td>
                    </tr>

                    <!--注册按钮-->
                    <tr>
                        <td colspan="2" id="td_sub">
                            <button class="btn" type="submit">提交</button></td>
                    </tr>

                </table>

            </form>
        </div>
    </div>
</div>
</body>
</html>